<template>
  <div>
    <give-up></give-up>
    <!--<div class="item" v-if="$root.resultObj.productUrl">
      <div class="content taokoul">
        <p>本商品的淘口令：</p>
        <input type="text" v-model="$root.resultObj.productUrl"><span v-clipboard:copy="$root.resultObj.productUrl"
                                                                      v-clipboard:success="onCopy"
                                                                      v-clipboard:error="onError">复制</span>
      </div>
    </div>-->
    <div class="item" v-if="$root.resultObj.orderExtraProducts.length > 0">
      <h4>同店铺附加商品<span style="color: red;font-weight: bolder"> （下面商品请直接在当前店铺中查找）</span></h4>
      <div class="content sku" v-for="item in $root.resultObj.orderExtraProducts">
        <div>
          <span class="label">附加商品名称：</span>
          <span class="txt">{{item.extraName}}</span>
        </div>
        <div style="width: 100%">
          <span class="label">商品价格：</span>
          <span class="txt">{{'￥'+item.extraPrice+' 元 '}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="label">购买数量：</span>
          <span class="txt">{{item.extraCount+'&nbsp;件'}}</span>
        </div>
        <div style="text-align: center">
          <img :src="item.extraUrlPrivate" style="height: 150px;">
        </div>
        <hr/>
      </div>
    </div>
    <div class="item"
         v-if="$root.resultObj.payPrice || $root.resultObj.payKeyword || $root.resultObj.payMessage || $root.resultObj.personalNote">
      <h4>商品基本信息</h4>
      <div class="content sku">
        <!-- <div>
            <span class="label">尺码：</span>
            <span class="txt">均码</span>
        </div>
        <div>
            <span class="label">颜色：</span>
            <span class="txt">灰色</span>
        </div> -->
        <div v-if="$root.resultObj.payPrice || $root.resultObj.payPrice === 0">
          <span class="label">支付价格：</span>
          <span class="txt">{{ $root.resultObj.totalPayPrice }}元</span>
        </div>
        <!--<div v-if="$root.resultObj.payKeyword">
          <span class="label">付款关键词：</span>
          <span class="txt">{{ $root.resultObj.payKeyword }}</span>
        </div>-->
        <div v-if="$root.resultObj.payMessage">
          <span class="label">付款要求：</span>
          <span class="txt">{{ $root.resultObj.payMessage }}</span>
        </div>
        <div class="clearfix" v-if="$root.resultObj.personalNote">
          <span class="label f_l">商家备注：</span>
          <p class="f_l">{{ $root.resultObj.personalNote }}</p>
        </div>
        <div class="clearfix" v-if="$root.resultObj.personalNote">
          <span class="label f_l">商品付款单号：</span>

          <p class="item"><input type="text" placeholder="请输入支付成功的付款单号" v-model="$root.resultObj.paishouTaobaoOrder"></p>
        </div>
      </div>
    </div>

    <!--    <div class="item"
             v-if="$root.resultObj.payPrice || $root.resultObj.payKeyword || $root.resultObj.payMessage || $root.resultObj.personalNote">
          <h4>按步骤完成付款</h4>
          <div class="content pay">
            <p><span class="iconfont icon-point point"></span>对照sku完成付款</p>
          </div>
        </div>-->

    <div class="item">
      <h4>淘宝订单号</h4>
      <div class="content order">
        <input type="number" v-model="$root.payTaobaoOrder">
      </div>
    </div>
    <div class="item">
      <h4>请填写拍下任务实际支付的金额</h4>
      <div class="content order">
        <input type="number" min="0" v-model="$root.realPayMoney">
      </div>
    </div>
    <div class="item">
      <span style="color: red;font-size: small;padding: 10px">订单提交前，请仔细检查每个输入框信息是否正确，订单多次验证失败，后台会认为您为“恶意刷单”</span>
    </div>
    <div class="item" style="margin-top: 20px">
      <button @click="next()" class="next-step my-btn">我已付款并提交订单</button>
    </div>
  </div>
</template>

<script>
  import MyTitle from 'components/my-title.vue'
  import GiveUp from 'components/give-up.vue'

  import {MessageBox, Toast} from 'mint-ui'

  import {savepaishouorder} from 'src/api/api'

  import MyBtn from 'components/my-btn.vue'

  export default {
    data() {
      return {}
    },
    components: {
      MyTitle,
      GiveUp,
      MyBtn
    },
    created() {

    },
    methods: {
      next() {
        if (!this.$root.payTaobaoOrder) {
          Toast({
            message: '请填写淘宝的付款单号',
            duration: 2000
          })
          return
        }
        if (!this.$root.realPayMoney) {
          Toast({
            message: '请填写实际付款金额',
            duration: 2000
          })
          return
        }
        if (this.$root.payTaobaoOrder.length <15) {
          Toast({
            message: '您的淘宝付款单号填写不正确',
            duration: 2000
          })
          return
        }
        MessageBox.confirm('是否确认提交？').then(action => {
          //将数据进行下调整，只提交需要的数据
          savepaishouorder(this.$root.openId, this.$root.payTaobaoOrder,this.$root.realPayMoney, this.$root.resultObj).then(res => {
            Toast({
              message: res.message,
              duration: 2500
            });
            if(res.success){
              setTimeout(function () {
                WeixinJSBridge.call('closeWindow')
              },2500);
            }
          })
        })
      },
      onCopy(e) {
        Toast({
          message: '复制成功',
          duration: 2000
        });
        console.log(e.text)
      },
      onError() {
        MessageBox('提示', '复制失败，请手动复制')
      }
    }
  }
</script>

<style lang="scss" scoped>
  h4 {
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
  }

  .item {
    border-bottom: none;
  }

  .sku {
    & > div {
      margin-top: 1rem;

      &:first-child {
        margin-top: 0;
      }

      p {
        font-size: 1.4rem;
        max-width: 75%;
      }

      span {
        display: inline-block;
        font-size: 1.4rem;

        &.label {
          color: gray;
        }

        &.txt {
          font-size: 1.4rem;
        }
      }
    }
  }

  .pay {
    font-size: 1.4rem;
    color: #76c156;
  }

  .order {
    input {
      width: 100%;
      font-size: 1.4rem;
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 0.5rem;
    }
  }

  .next-step {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .my-btn {
    font-size: 1.6rem;
    text-align: center;
    padding: 1rem 0;
    color: #fff;
    width: 100%;
    background: linear-gradient(to bottom, #9dee7b, #71b25b);
    border: none;
    border-radius: 0.5rem;
  }
</style>
